<template>
  <div class="interview_item" @click="interviewItemClick">
    <h3 class="title">{{itemData.title}}</h3>
    <div class="detail">
      <span class="post">
        <span>职位:</span>
        <span>{{itemData.position}}</span>
      </span>
      <span class="firm">
        <span>公司:</span>
        <span>{{itemData.firm}}</span>
      </span>
      <span class="date">
        <span>时间:</span>
        <span>{{time}}</span>
      </span>

    </div>
    <p class="content">{{itemData.processDesc}}</p>
    <div class="process">
      <span>面试过程:</span>
      <div class="process_item">
        <div v-for="index in itemData.interviewTypes.length">
          <span>第{{counter(index)}}轮面试:</span>
          <span>{{itemData.interviewTypes[index - 1]}}</span>
        </div>
      </div>
    </div>
    <div class="about_interview">
      <span>面试结果:</span> <i>{{itemData.feedback.result}}</i>
      <span>面试难度:</span> <i>{{itemData.feedback.difficulty}}</i>
      <span>面试感受:</span> <i>{{itemData.feedback.feeling}}</i>
    </div>
  </div>
</template>

<script>
  import {numericTypeConverse, formatTime} from "common/Utils";

  export default {
    name: "InterviewItem",
    props: {
      itemData: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    computed: {
      time() {
        return this.itemData.publishTime ? formatTime(this.itemData.publishTime) : ''
      }
    },
    methods: {
      counter(index) {
        return numericTypeConverse(index)
      },
      interviewItemClick() {
        this.$router.push({path: '/detail/' + this.itemData.id}, onComputed => {}, onAbort => {})
      }
    }
  }
</script>

<style scoped>
  .interview_item {
    position: relative;
    width: 100%;
    margin: 20px auto 0;
    padding: 15px;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    box-sizing: border-box;
  }

  .interview_item:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
  }

  .interview_item:hover h3 {
    color: #002766;
  }

  h3 {
    font-size: 16px;
  }

  .detail {
    margin-top: 12px;
    color: #8F9395;
    font-size: 12px;
  }

  .detail > span {
    margin-right: 15px;
  }

  .detail > span span:nth-child(1) {
    margin-right: 5px;
  }

  .content {
    margin-top: 12px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .process {
    overflow: hidden;
    margin-top: 12px;
    font-size: 12px;
  }

  .process > span {
    float: left;
  }

  .process .process_item {
    float: left;
  }

  .process .process_item div {
    margin: 0 0 5px 5px;
  }

  .process .process_item div span:nth-child(1) {
    margin-right: 5px;
  }

  .about_interview {
    margin-top: 8px;
    font-size: 12px;
  }

  .about_interview span {
    margin-right: 5px;
    color: #8F9395;
  }

  .about_interview i {
    position: relative;
    margin-right: 20px;
    font-style: normal;
  }

  .about_interview i:nth-of-type(1)::after,
  .about_interview i:nth-of-type(2)::after {
    position: absolute;
    top: 1px;
    right: -12px;
    content: "|";
    color: #8F9395;
  }

  .action {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .star,
  .comment,
  .collect {
    margin-right: 20px;
    font-size: 14px;
  }

  .star span:nth-child(1),
  .comment span:nth-child(1),
  .collect span:nth-child(1) {
    margin-right: 3px;
    font-size: 16px;
  }

</style>
